<template>
    <!-- 收货地址 -->
    <van-contact-card type="edit" :name="`${address.consignee} ${address.region_text}`" :tel="address.mobile" @click="AddressShow = true" />

    <!-- 商品卡片 -->
    <van-card
        v-for="item in OrderProductData"
        :thumb="item.products.thumb_text"
    >
        <template #title>
            <div class="title">{{ item.products.name }}</div>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-if="item.attrs">
            <van-tag v-for="(attr,index) in JSON.parse(item.attrs)" :key="index" class="tag" type="primary">{{attr.value}}</van-tag>
        </template>

        <!-- 卡片的插槽部分 -->
        <template #desc v-else>
            <van-tag class="tag" type="danger">无商品规格</van-tag>
        </template>

        <template #price>
            <div class="price-box">
                <div class="price">
                    <p>单价：￥{{item.price}}</p>
                    <p>商品总价：￥ {{ item.total }}</p>
                </div>
                <div class="num">x{{ item.pronum }}</div>
            </div>
        </template>

        <template #footer v-if="order.status >= '3'">
            <van-button type="warning" size="mini" @click="OnCommentChange(item)">
                {{item.status ? '查看评价' : '立即评价'}}
            </van-button>
        </template>
    </van-card>

    <!-- 订单信息 -->
    <van-cell title="订单号" :value="order.code" />
    <van-cell title="优惠金额" v-if="order.coupon" :value="`￥${order.coupon_price}`" />
    <van-cell title="订单总价" :value="`￥${order.amount}`" />
    <van-cell title="支付方式" :value="order.pay_text" />
    <van-cell title="订单状态" :value="order.status_text" />
    <van-cell title="下单时间" :value="order.createtime_text" />
    <van-cell title="订单描述" :value="order.remark" />
    <van-cell title="审核原因" v-if="order.status == '-5'" :value="order.examinereason" />

    <!-- 操作按钮组 -->
    <div class="actions">
        <van-button square hairline type="primary" size="large">在线客服</van-button>

        <van-button v-if="order.status == '1'" square hairline type="danger" size="large">申请退款</van-button>

        <van-button v-if="order.status == '2'" square hairline type="success" size="large" @click="OnConfirmReceive(order.id)">确认收货</van-button>
        <van-button v-if="order.status == '2'" square hairline type="warning" size="large">物流详情</van-button>
    </div>

    <!-- 收货地址弹出层 -->
    <van-popup
        v-model:show="AddressShow"
        position="bottom"
        round
        style="padding-top: 4px;"
    >
        <van-form>
            <van-field 
                v-model="address.consignee"
                label="收件人"
                readonly
            />
            <van-field 
                v-model="address.mobile"
                label="手机号码"
                readonly
            />
            <van-field 
                v-model="address.region_text"
                label="所在地区"
                readonly
            />
            <van-field 
                v-model="address.address"
                label="详细地址"
                readonly
            />
            <van-field 
                v-model="address.status_text"
                label="是否默认地址"
                readonly
            />
            <div style="width:80%;margin:1em auto;">
                <van-button round block type="primary" @click="AddressShow = false">关闭</van-button>
            </div>
        </van-form>
    </van-popup>

    <!-- 评论弹出层 -->
    <van-popup
        v-model:show="CommentShow"
        position="bottom"
        round
        style="height: 60%; padding-top: 4px;"
    >
        <van-form @submit="OnCommentSubmit">
            <van-field 
                label="评论内容"
                type="textarea"
                rows="3"
                v-model="CommentData.comment"
                placeholder="请输入评论内容"
                :rules="[
                    {required: true, message: '请输入评论内容'},
                ]"
                :readonly="CommentData.status"
            />

            <van-field label="评分">
                <template #input>
                    <van-rate v-model="CommentData.rate" :readonly="CommentData.status" />
                </template>
            </van-field>

            <van-field label="上传图集">
                <template #input>
                    <van-uploader 
                        v-model="thumbs" 
                        multiple 
                        :max-count="8"
                        :readonly="CommentData.status"
                        :deletable="!CommentData.status"
                    />
                </template>
            </van-field>

            <div style="width:80%;margin:2em auto;">
                <van-button v-if="CommentData.status" round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" @click="CommentShow = false">关闭弹框</van-button>
                <van-button v-else round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交评价</van-button>
            </div>
        </van-form>
    </van-popup>
</template>

<script setup>
    const { proxy } = getCurrentInstance();

    // 接收地址栏参数 订单id
    const orderid = ref(proxy.$route.query.orderid ?? 0);

    // 登录信息
    const business = proxy.$business;
    
    // 订单数据
    const order = ref({});
    const OrderProductData = ref([]);
    const address = ref({});

    // 收货地址弹出层
    const AddressShow = ref(false);

    // 评论
    const CommentShow = ref(false);
    const CommentData = ref({
        id: 0,
        rate: 0,
        comment: '',
        status: false
    });

    // 评价图片
    const thumbs = ref([]);

    // 挂载前
    onBeforeMount(() => GetInfoData());

    const GetInfoData = async () =>
    {
        // 组装参数
        let params = {
            orderid:orderid.value,
            busid:business.value.id
        }

        let result = await proxy.$http.post({
            url:'/order/info',
            params
        })

        if(result.code === 1)
        {
            order.value = result.data.order;
            OrderProductData.value = result.data.OrderProductData;
            address.value = result.data.address;

            // 如果有使用优惠券
            if(order.value.coupon)
            {
                // 购买的商品总价
                let amount = 0;

                // 循环计算
                OrderProductData.value.map(product =>
                {
                    amount += parseFloat(product.total);

                })

                // 优惠价格
                order.value.coupon_price = (amount - parseFloat(order.value.amount)).toFixed(2);
            }

            // 循环计算
            OrderProductData.value.map(product =>
            {
                // 给商品追加一个自定义属性 用于判断是否有无评价
                // 根据评论时间来判断是否有评价过
                product.status = product.comtime ? true : false;

            })
        }else
        {
            proxy.$fail({
                message:result.msg,
                onClose:() =>
                {
                    proxy.$router.back();
                }
            })
        }
    }

    // 评价
    const OnCommentChange = (product) =>
    {
        CommentData.value = {
            id: product.id,// 订单商品id
            rate: parseInt(product.rate),
            comment: product.comment,
            status: product.status
        }

        // 上传图片的
        let list = [];

        product.thumbs_text.map(url =>
        {
            list.push({url})
        })

        thumbs.value = list;

        CommentShow.value = true;
    }

    // 提交评价
    const OnCommentSubmit = async () =>
    {
        // 组装提交评论数据
        let params = {
            id: CommentData.value.id,
            comment: CommentData.value.comment,
            rate: CommentData.value.rate,
            orderid:orderid.value,
            busid:business.value.id
        }

        // 判断是否上传图片
        if(thumbs.value.length > 0)
        {
            let list = [];

            //图片追加到数组中
            thumbs.value.map(item => (item.file && list.push(item.file)));
            params.thumbs = list;
        }

        let result = {};

        if(params.thumbs)
        {
            // 多图上传
            result = await proxy.$http.upload({
                url:'/order/comment',
                params
            })
        }else
        {
            result = await proxy.$http.post({
                url: '/order/comment',
                params
            })
        }

        if(result.code === 1)
        {
            proxy.$success(result.msg);

            GetInfoData();

            // 关闭弹框
            CommentShow.value = false
        }else
        {
            proxy.$fail(result.msg);
        }
    }

    // 确认收货
    const OnConfirmReceive = (orderid) =>
    {
        proxy.$confirm({
            title: '确认收货',
            message: '是否确认收货?',
        }).then(async () =>
        {
            let result = await proxy.$http.post({
                url: '/order/receive',
                params: {
                    orderid,
                    busid:business.value.id
                }
            })

            if(result.code === 1)
            {
                proxy.$success(result.msg);

                GetInfoData();
            }else
            {
                proxy.$fail(result.msg);
            }
        }).catch(err => {})
    }
</script>

<style scoped>
    @import url('/assets/css/OrderInfo.css');
</style>
